import React, {Component} from 'react';
import {
    StyleSheet,
    AppRegistry,
    Image,
    View,
    Text,
    Dimensions,
    ListView,
    TouchableHighlight,
    FlatList,
    Animated,
    PanResponder,
    TouchableOpacity,
    Easing
} from 'react-native';
import {
    TabNavigator,
    StackNavigator
} from 'react-navigation';
// import Shou from '../index.android';

var {height, width} = Dimensions.get('window');

 class Start extends Component {
    constructor(props) {
        super(props);
        this._renderItem = this._renderItem.bind(this); 
        navigation = props.navigation; 
        this.state = {
            dataSource:[
                {'id':1,'name':"学术馆",'left':0,'top':0},
                {'id':2,'name':"藏品馆",'left':0,'top':0},
                {'id':3,'name':"展览馆",'left':0,'top':0},
                {'id':4,'name':"试听馆",'left':0,'top':0},
                {'id':5,'name':"教育馆",'left':0,'top':0},
                {'id':6,'name':"游戏馆",'left':0,'top':0},
                {'id':7,'name':"文创馆",'left':0,'top':0},
                {'id':8,'name':"图书馆",'left':0,'top':0},
                {'id':9,'name':"新闻馆",'left':0,'top':0},
                {'id':10,'name':"导赏馆",'left':0,'top':0},
                {'id':11,'name':"古建馆",'left':0,'top':0}
            ],
            fadeInOpacity: new Animated.Value(0),
            rotation: new Animated.Value(0),
            fontSize: new Animated.Value(0)
        };
      }

    // static navigationOptions=({navigation}) => ({
    //     headerTitle: '紫薇城',
    //     headerTitleStyle:{
    //         alignSelf:'center',
    //         // width:width
    //     },
    //     headerTintColor:'burlywood',
        
    //   });
    componentWillMount(){
        const { navigate } = this.props.navigation;
              this._gestureHandlers = PanResponder.create({
                  // 要求成为响应者：
                  
                  onStartShouldSetPanResponder: (evt, gestureState) => true,
                  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
                  onMoveShouldSetPanResponder: (evt, gestureState) => true,
                  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            
                  onPanResponderGrant: (evt, gestureState) => {
                    
                  },
                  onPanResponderMove: (evt, gestureState) => {
                      console.log(evt, gestureState);
              
                  },
                  onPanResponderTerminationRequest: (evt, gestureState) => true,
                  onPanResponderRelease: (evt, gestureState) => {
                    // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                    // 一个手势操作已经成功完成。
                    console.log("开始手势",gestureState.dx);
                    if(gestureState.dx == 0){
                      // navigate('Profile0',{user:'行超'});
                    }
                    this.setState({a:0});
                    
                  },
                  onPanResponderTerminate: (evt, gestureState) => {
                    // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
                    //<Text style={styles.slideText}>{elem.title}</Text>
                  },
                });
                var timing = Animated.timing;
                Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
                            return timing(this.state[property], {
                            toValue: 1,
                            duration: 1000,
                            easing: Easing.linear
                        });
                    })).start();

          }
      _keyExtractor = (item, index) => item.id;
  _renderItem({item,index}){
    const { navigate } = this.props.navigation;
      return(
        <TouchableOpacity onPress={() => navigate('Profile'+item.id)} activeOpacity={0.3}>
        <View style={{width:100,height:100,paddingTop:0,flex: 1, flexDirection: 'column',justifyContent: 'flex-start',alignSelf:'center',}}>
            <View style={{width:100,height:100,flex: 1,transform:[{rotateZ:'0deg'}]}}>
            <Image style={{backgroundColor:'gray',width:100,height:100,}} source={require("../img/map_house.png")}></Image>
            </View>
        </View>
        </TouchableOpacity>
      )
  };
render() {    
    var onThis = this;  
        return (
            <Animated.View {...onThis._gestureHandlers.panHandlers}style={{transform: [{
                rotateZ: this.state.rotation.interpolate({
                    inputRange: [0,1],
                    outputRange: ['0deg', '360deg']
                })
            }]}}>
             <FlatList 
             data={this.state.dataSource}
             numColumns={4}
             style={{transform:[{rotateZ:'0deg'}]}}
             keyExtractor={this._keyExtractor}
             renderItem={this._renderItem.bind(this)}>
             </FlatList>
            </Animated.View>
         )
     }
}
export default Guan = StackNavigator({
    Home: { screen: Start,
      navigationOptions:{
        // header:null
        headerTitle: '紫薇城',
        headerTitleStyle:{
            alignSelf:'center',
                // width:width
            },
        headerTintColor:'burlywood',
      } },
   
  
  });
const styles = StyleSheet.create({

})



